<template>
  <el-row justify="end">
    <el-space>
      <slot :loading="loading" :on-cancel="props.onCancel" :on-confirm="onConfirm">
        <el-button v-bind="props.cancelBtnProps" @click="onCancel">{{ props.cancelText }}</el-button>
        <el-button type="primary" v-bind="props.okBtnProps" :loading="loading" @click="onConfirm">{{ props.okText }}</el-button>
      </slot>
    </el-space>
  </el-row>
</template>
 
<script setup>
import {ref} from 'vue'
const loading = ref(false);
 
const props = defineProps({
  okText: '确定',
  cancelText: '取消',
  okBtnProps: {
    type: Object,
    default: () => ({})
  },
  cancelBtnProps: {
    type: Object,
    default: () => ({})
  },
  onCancel: {
    type: Function,
    default: () => {}
  },
  onConfirm: {
    type: Function,
    default: () => {}
  }
});
 
const onCancel = () => {
  props.onCancel();
};
 
const onConfirm = async () => {
  try {
    loading.value = true;
    const res = await props.onConfirm();
    if (res) {
      loading.value = false;
    }
  } catch (error) {
    loading.value = false;
  }
};
</script>
<style scoped lang="scss">
.el-row{
  margin-bottom: 0;
}
</style>